<script setup>
const props = defineProps({
  editMode:{
    type:Boolean,
    default: true
  },
  showScore:{
    type:Boolean,
    default: false
  },
  showIndex:{
    type:Boolean,
    default: false
  },
  showType:{
    type:Boolean,
    default: false
  },
  drawingList: {
    type:Array,
    default: () => []
  },
  activeData : {
    type: Object,
    default: () => ({})
  },
  element: {
    type: Object,
    default: () => ({})
  },
  formData:{
    type: Object,
    default: () => ({})
  },
  index: Number,
})
const emits = defineEmits(['activeItem', 'copyItem', 'deleteItem'])

function activeItem() {
  emits('activeItem', props.element)
}
function copyItem() {
  emits('copyItem',props.element)
}
function deleteItem() {
  emits('deleteItem', props.index)
}

const isActive = computed(()=>{
  if(props.editMode){
    return  props.activeData.formId === props.element.formId
  }else{
    return false
  }
})

const answerValue = computed({
  get() {
    return props.editMode ? props.element.answer : props.formData[props.element.field];
  },
  set(val) {
    if (props.editMode) {
      props.element.answer = val;
    } else {
      props.formData[props.element.field] = val;
    }
  }
});



</script>

<template>
  <el-form-item class="w-full" :prop="element.field">
    <div class="issue-item"  :class="{'active-item':isActive }">
      <div class="icon-left" v-if="editMode">
        <div @click="activeItem" class="icon-circle icon-tools"><el-icon><Tools /></el-icon></div>
        <div @click="deleteItem" class="icon-circle icon-delete"><el-icon><Delete /></el-icon></div>
        <div @click="copyItem" class="icon-circle icon-copy"><el-icon><CopyDocument /></el-icon></div>
      </div>
      <div class="content">
        <div class="issue-title">
          <span class="dot" v-if="element.isRequired ==='Y'">*</span>
          <span v-if="showIndex">{{index+1}}、</span>
          <span v-if="showType && !editMode">【{{element.typeName}}】</span>
          <el-input v-if="editMode" placeholder="请输入标题" v-model.trim="element.title"></el-input>
          <div v-else class="text-[14px]">{{element.title}}</div>
          <span  v-if="showScore" class="text-[#666] text-[12px] ml-[10px] font-bold inline-block min-w-[40px] text-center" >({{element.score}}分)</span>
          <el-tag v-if="showType && editMode">{{element.typeName}}</el-tag>
        </div>
        <div v-if="element.showSubTitle==='Y'" class="issue-sub-title">
          <el-input v-model.trim="element.subTitle" placeholder="请输入副标题描述"></el-input>
        </div>
        <div class="issue-controller">
          <template v-if="element.type === 'input'">
            <el-input v-bind="element.attribute" v-model.trim="answerValue" ></el-input>
          </template>

          <template v-if="element.type === 'input-password'">
            <el-input v-bind="element.attribute"  v-model.trim="answerValue"  ></el-input>
          </template>

          <template v-if="element.type === 'textarea'">
            <el-input v-bind="element.attribute" v-model.trim="answerValue"  type="textarea" ></el-input>
          </template>

          <template v-if="element.type === 'single-check'">
            <el-radio-group v-if="element.attribute.showType==='radio'"   v-model.trim="answerValue"  v-bind="element.attribute">
              <el-radio v-for="item in element.options" :label="item.value" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
            <el-select v-if="element.attribute.showType==='select'"   v-model.trim="answerValue"  v-bind="element.attribute">
              <el-option v-for="item in element.options" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
            <el-button v-if="element.options.length ===0" type="info" link>暂无选项信息，请在右侧【数据源】添加数据</el-button>
          </template>

          <template v-if="element.type === 'multiple-check'">
            <el-checkbox-group v-if="element.attribute.showType==='checkbox'"   v-model="answerValue"   v-bind="element.attribute">
              <el-checkbox  v-for="item in element.options" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
            </el-checkbox-group>
            <el-select v-if="element.attribute.showType==='select'"  v-model="answerValue"   multiple v-bind="element.attribute">
              <el-option v-for="item in element.options" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
            <el-button v-if="element.options.length ===0" type="info" link>暂无选项信息，请在右侧【数据源】添加数据</el-button>
          </template>

          <template v-if="element.type === 'input-number'">
            <el-input-number  v-model="answerValue" v-bind="element.attribute"></el-input-number>
          </template>

          <template v-if="element.type === 'rate'">
            <el-rate   v-model="answerValue"  v-bind="element.attribute" />
          </template>

          <template v-if="element.type === 'slider'">
            <el-slider  v-model="answerValue"  v-bind="element.attribute"   />
          </template>

          <template v-if="element.type === 'date'">
            <el-date-picker  v-model="answerValue"  v-bind="element.attribute" type="date"></el-date-picker>
          </template>

          <template v-if="element.type === 'datetime'">
            <el-date-picker  v-model="answerValue"  v-bind="element.attribute" type="datetime"></el-date-picker>
          </template>

          <template v-if="element.type === 'image-upload'">
            <image-upload  v-model="answerValue"  v-bind="element.attribute" />
          </template>

          <template v-if="element.type === 'file-upload'">
            <file-upload  v-model="answerValue"  v-bind="element.attribute" />
          </template>
        </div>
      </div>
      <div class="icon-right" v-if="editMode">
        <el-icon class="drag-handle mb-6 cursor-move"><Rank /></el-icon>
        <el-icon @click="emits('moveUp',index)" class="mb-6 cursor-pointer" v-if="index > 0"><Top /></el-icon>
        <el-icon  @click="emits('moveDown',index)" class="mb-6 cursor-pointer"  v-if="index < drawingList.length-1"><Bottom /></el-icon>
      </div>
    </div>
  </el-form-item>

</template>

<style scoped lang="scss">
.issue-item{
  width: 100%;
  padding:10px 20px;
  border: 1px solid #eee;
  background-color: #fafafa;
  position: relative;
  display: flex;
  justify-content: space-between;
  &.active-item,
  &:hover{
    border-color: var(--el-color-primary);
    background-color: rgba(64, 158, 255,.08)
  }
  .content{
    flex: 1;
    min-width: 0px;
  }
  .icon-left{
    display: flex;
    flex-direction: column;
    position: relative;
    left: -10px;
    top: 15px;
    font-size: 16px;
  }
  .icon-right{
    display: flex;
    flex-direction: column;
    position: relative;
    right: -10px;
    top: 20px;
    font-size: 16px;
    .el-icon{
      margin-bottom: 15px;
    }
    .el-icon:hover{
      color: var(--el-color-primary);
    }
  }
  .icon-circle{
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    .el-icon{
      margin-bottom: 15px;
    }
    &.icon-copy{
      color: var(--el-color-primary);
    }
    &.icon-delete{
      color: var(--el-color-danger);
    }
    &.icon-tools{
      color: var(--el-color-info);
    }
  }

}
.issue-title{
  display: flex;
  align-items: center;
  margin-bottom:10px;
  margin-top: 10px;
  .dot{
    color: #ff0000;
    position: relative;
    font-size: 16px;
    margin-right: 4px;
    top: 5px;
  }
  :deep(.el-input__wrapper){
    box-shadow: none;
  }
}
.issue-sub-title{
  padding-left: 23px;
  margin-bottom:10px;
  :deep(.el-input__wrapper){
    box-shadow: none;
  }
}
.issue-controller{
  padding-left: 23px;
}
</style>
